<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>轮播图组件</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.4.1/css/bootstrap.min.css}"  media="all">
    <!--    导入bootstrap.js之前要先导入依赖的jquery-->
    <script type="text/javascript" th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.4.1/js/bootstrap.min.js}"></script>
</head>
<body>
<!-- 3.轮播图 -->
<div class="container-fluid" style="height: 220px;">
    <!-- 这是轮播图 -->
    <div class="row" style="padding-top: 0px">
        <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">

            <!-- 轮播（Carousel) -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="/img/train2.jpg" class="img-responsive" alt="First slide">
                </div>
                <div class="item">
                    <img src="/img/train1.jpg" alt="Second slide">
                </div>
                <div class="item">
                    <img src="/img/train3.jpg" alt="Third slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>
</body>
</html>